<!-- 平台建筑研究院首页 -->
<template>
    <section class="institute">
        <div class="banner bg-img">
            <el-image
                src="https://resource.ciip.com/common/img/%E7%A0%94%E7%A9%B6%E9%99%A2%E5%8A%A8%E5%9B%BE/banner.gif"
                :fit="'scale-down'"
                lazy
                class="flex flex-center"
            >
            </el-image>
        </div>
        <div class="main1 cp-container">
            <div class="flex main-title flex-center">
                优秀研究机构推荐
            </div>
            <div class="flex recommend">
                <div class="img-content">
                    <img src="/img/institute/index-logo.png" alt="" class="logo">
                </div>
                <div class="company-info flex flex-column">
                    <h2 class="name">
                        北京建谊高能建筑设计研究院
                    </h2>
                    <div class="flex major-business">
                        <span class="flex">
                            <i class="icon icon-major">
                            </i>
                            建筑行业（建筑工程）甲级资质
                        </span>
                        <span class="flex">
                            <i class="icon icon-major">
                            </i>
                            城市规划乙级资质
                        </span>
                        <span class="flex">
                            <i class="icon icon-major">
                            </i>
                            BIM设计
                        </span>
                        <span class="flex">
                            <i class="icon icon-major">
                            </i>
                            钢结构研发咨询
                        </span>
                    </div>
                    <div class="good-field">
                        擅长领域：装配式钢结构建筑的设计及研发。
                    </div>
                </div>
            </div>
        </div>
        <div class="main2 case-wrapper cp-container">
            <h3 class="flex case-title">
                项目案例
            </h3>
            <el-row :gutter="30">
                <el-col v-for="(item, index) in caseData" :key="index" :span="8">
                    <div class="case-item">
                        <div class="img-content">
                            <img :src="`${imgUrl}${item.examplePicture.fileShowUrl}?x-oss-process=image/resize,w_${380}`" alt="">
                        </div>
                        <div class="flex case-txt flex-column">
                            <p class="title">
                                {{FILTER_FORMATER.wordNum(item.exampleTitle, 17)}}
                            </p>
                            <p class="desc">
                                {{htmlStr(item.exampleInfo, 35)}}
                            </p>
                            <div class="more flex flex-center" @click="jumpLink(item)">
                                了解更多
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div v-if="!caseData.length" class="no-content">暂无数据</div>
        </div>
        <div class="main3">
            <section class="cp-container">
                <div class="main-title flex flex-center">
                    优质研究院服务
                </div>
                <el-row :gutter="30">
                    <el-col v-for="(item, index) in serviceData" :key="index" :span="6">
                        <nuxt-link :to="item.url" class="service-item flex flex-center flex-column" target="_blank">
                            <div class="img-content">
                                <img :src="item.fileShowUrl" alt="">
                            </div>
                            <p class="flex flex-center">
                                {{item.title}}
                            </p>
                        </nuxt-link>
                    </el-col>
                </el-row>
            </section>
        </div>
        <div class="main4">
            <section class="cp-container">
                <div class="main-title flex flex-center">
                    合作伙伴
                </div>
                <div class="partner flex">
                    <div v-for="(item,index) in partnerData" :key="index" class="partner-img">
                        <img :src="`${imgUrl}${item.partnerIcons.fileShowUrl}?x-oss-process=image/resize,w_${220}`" alt="" >
                    </div>
                    <div v-if="!partnerData.length" class="no-content">暂无数据</div>
                </div>
            </section>
        </div>
    </section>
</template>

<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
import {partnerList, caseList} from '~/api/institute'

@Component({
    layout: 'institute',
    head () {
        return {
            title: '首页-平台建筑研究院',
            meta: [
                {
                    hid: 'description',
                    name: 'description',
                    content: '平台建筑研究院'
                },
                {
                    hid: 'keywords',
                    name: 'keywords',
                    content: '平台建筑研究院'
                }
            ]
        }
    }
})
export default class PageInstituteIndex extends Vue {
    partnerData: any = []
    caseData: any = []
    serviceData: any = [
        {title: '工程服务', fileShowUrl: '/img/institute/index-1.jpg', url: '/institute/s/58'},
        {title: '商务对接', fileShowUrl: '/img/institute/index-2.jpg', url: '/institute/d/58'},
        {title: '研发合作', fileShowUrl: '/img/institute/index-3.jpg', url: '/institute/s/113'},
        {title: '大咖在线', fileShowUrl: '/img/institute/index-4.jpg', url: '/institute/expert'}
    ]
    imgUrl: string = this.$store.state.operationUrl
    bjjyUrl: string = 'http://aii.bjjy.com'
    mounted () {
        this.getPartnerList()
        this.getCaseList()
    }
    htmlStr (str: string, num: number) {
        const val = str.replace(/<\/?.+?>/g, '').replace(/(^\s+)|(\s+$)/g, '').replace(/&nbsp;/ig, '')
        let htmlVal = val || ''
        if (
            val &&
            num &&
            !isNaN(Number(num)) &&
            val.length > num
        ) {
            num = Number(num)
            htmlVal = val.substring(0, num) + '...'
        }
        return htmlVal
    }
    async getPartnerList () {
        const {data}: any = await partnerList({ciipCoopPartnerType: 'INDUSTRY'})
        if (data.code >= 0) {
            this.partnerData = data.data
        }
    }
    async getCaseList () {
        const {data}: any = await caseList()
        if (data.code >= 0) {
            this.caseData = data.data
        }
    }
    jumpLink (item: any) {
        window.open(this.bjjyUrl + `/case/detail/${item.id}`)
    }
}
</script>
<style lang="scss">
    .institute {
        .el-image__inner{
            width: auto;
        }
    }
</style>
<style lang="scss" scoped>
    .institute{
        .banner {
            width: 100%;
            height: 480px;
            align-items: center;
            background-color: #1638af;
            background: url(/img/institute/institute_banner.jpg) no-repeat;
            background-position: center;
            overflow: hidden;
            .el-image{
                height: 100%;
            }
            .cp-container {
                height: 100%;
                justify-content: center;
                .title, .desc {
                    color: $white;
                }
                .title {
                    font-size: 40px;
                    font-weight: normal;
                    margin-bottom: 30px;
                }
                .desc {
                    width: 630px;
                    font-size: $mid-font-size;
                }
            }
        }
        .main-title{
            padding: 70px 0 30px;
            font-size: 32px;
            color: #333;
        }
        .no-content{
            width: 100%;
            text-align: center;
            color: #999;
        }
        .main1 {
            .recommend{
                align-items: flex-start;
                .img-content{
                    position: relative;
                    margin-right: 25px;
                    width: 80px;
                    height: 80px;
                    img{
                        @include imgCenter;
                    }
                }
                .company-info{
                    flex: 1;
                    font-size: 14px;
                    .name{
                        font-size: 24px;
                        line-height: 1.2;
                    }
                    .major-business{
                        margin: 15px 0 10px;
                        align-items: center;
                        line-height: 1.6;
                        font-size: 14px;
                        color: #999;
                        span{
                            margin-right: 20px;
                            align-items: center;
                            i{
                                margin-right: 5px;
                            }
                        }
                    }
                }
            }
        }
        .case-wrapper{
            margin-top: 35px;
            padding-bottom: 70px;
            .case-title{
                position: relative;
                padding-left: 10px;
                margin-bottom: 20px;
                &:before{
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    margin-top: -10px;
                    width: 4px;
                    height: 20px;
                    background: #11a9e8;
                }
            }
            .case-item{
                &:hover{
                    box-shadow: 1px 5px 10px #e6e6e6;
                }
                .img-content{
                    img{
                        width: 100%;
                        min-height: 280px;
                        max-height: 280px;
                    }
                }
                .case-txt {
                    padding: 20px 20px 40px;
                    font-size: 18px;
                    .desc{
                        margin: 10px 0 30px;
                        height: 38px;
                        font-size: 14px;
                        color: #666;
                    }
                    .more{
                        margin: 0;
                        width: 118px;
                        height: 34px;
                        border: 1px solid #11a9e8;
                        color: #11a9e8;
                        transition: all 0.3s;
                        cursor: pointer;
                        font-size: 14px;
                        &:hover{
                            background: #11a9e8;
                            color: #fff;
                        }
                    }
                }
            }
        }
        .main3{
            padding-bottom: 70px;
            background: #f7f7f7;
            .service-item{
                color: #333;
                &:hover{
                    box-shadow: 1px 5px 20px #e6e6e6;
                }
                .img-content{
                    position: relative;
                    width: 100%;
                    height: 214px;
                    img{
                        @include imgCenter;
                    }
                }
                p{
                    width: 100%;
                    height: 58px;
                    font-size: 18px;
                    background: #fff;
                }
            }
        }
        .main4{
            .partner{
                padding-bottom: 70px;
                flex-wrap: wrap;
                .partner-img{
                    position: relative;
                    margin: 0 1px;
                    width: 238px;
                    height: 80px;
                    &:hover{
                        box-shadow: 1px 5px 10px #e6e6e6;
                    }
                    img{
                        @include imgCenter;
                    }
                }
            }
        }
    }
</style>
